<template>
  <div class="pop-container">
    <div class="main">
      <i class="iconfont close"
         @click="close">&#xe781;</i>
      <div class="title">按键说明</div>
      <div v-for="item in icons"
           :key="item.label"
           class="row">
        <div class="left">
          <i :class="item.class"></i>
          <span>{{ item.label }}</span>
        </div>
        <div class="right">{{ item.content }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      icons: [{
        class: 'icon-play-circle iconfont',
        label: '运行',
        content: '单击后运行解释代码'
      }, {
        class: 'icon-rotate-ccw iconfont',
        label: '撤销',
        content: '单击后撤销上次操作'
      }, {
        class: 'icon-rotate-cw iconfont',
        label: '重做',
        content: '单击后重做上次操作'
      }, {
        class: 'icon-trash-2 iconfont',
        label: '清空',
        content: '单击后清空编辑器内代码'
      }, {
        class: 'icon-refresh-cw iconfont',
        label: '刷新',
        content: '单击后刷新编辑器'
      }, {
        class: 'icon-maximize iconfont',
        label: '全屏',
        content: '单击后全屏显示'
      }, {
        class: 'icon-minimize iconfont',
        label: '取消全屏',
        content: '单击后取消全屏显示'
      }]
    }
  },
  methods: {
    close () {
      this.$emit('show', false)
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles'

.pop-container
  position fixed
  top 0
  left 0
  z-index 10000
  display flex
  justify-content center
  align-items center
  width 100vw
  height 100vh
  background-color rgba(0, 0, 0, 0.6)
  .main
    position relative
    display flex
    flex-direction column
    justify-content center
    align-items center
    width 30%
    padding 25px
    background-color #fff
    border-radius 8px
    .close
      position absolute
      top 10px
      right 10px
      font-size 20px
      cursor pointer
    .title
      width 100%
      margin-bottom 20px
      padding-bottom 10px
      font-size 20px
      font-weight bold
      border-bottom split-line
    .row
      display flex
      flex-direction row
      justify-content space-around
      width 90%
      font-size 18px
      line-height 40px
      font-weight bold
      .left, .right
        display flex
        flex-direction row
        justify-content space-around
        width 30%
        min-height 40px
        margin-top 10px
        color #fff
        background-color color-yellow
        box-sizing border-box
        border-radius 8px
      .left
        span
          width 50%
      .right
        width 50%
        background-color color-normal
</style>
